'use client';

import React from 'react';
import { Layout, Menu, Button } from 'antd';
import type { MenuProps } from 'antd';
import { useRouter, usePathname } from 'next/navigation';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  AppstoreOutlined,
  FileImageOutlined,
  PictureOutlined,
  ToolOutlined,
  DatabaseOutlined,
  RocketOutlined,
  SettingOutlined,
  BookOutlined,
  ApiOutlined,
  MessageOutlined,
  HistoryOutlined
} from '@ant-design/icons';
import styles from '../Admin.module.scss';
import { VERSION } from '../../../lib/config';

const { Sider } = Layout;

interface AdminSiderProps {
  collapsed: boolean;
  onCollapse: (collapsed: boolean) => void;
}

// 定义菜单项类型
interface MenuItem {
  key: string;
  icon?: React.ReactNode;
  label: React.ReactNode;
  onClick?: () => void;
  children?: MenuItem[];
}

// 静态菜单数据
const staticMenuItems: MenuItem[] = [
  {
    key: '/admin',
    icon: <AppstoreOutlined />,
    label: '提示词广场',
  },
  {
    key: '/admin/text-to-image',
    icon: <FileImageOutlined />,
    label: '文生图',
  },
  {
    key: '/admin/image-to-image',
    icon: <PictureOutlined />,
    label: '图生图',
  },
  {
    key: '/admin/post-processing',
    icon: <ToolOutlined />,
    label: '后期处理',
  },
  {
    key: '/admin/ai-chat',
    icon: <MessageOutlined />,
    label: (
      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
        <span>AI对话生成</span>
        <span style={{ 
          fontSize: '10px', 
          color: '#00ff00', 
          marginLeft: '4px'
        }}>
          beta
        </span>
      </div>
    ),
  },
  {
    key: '/admin/advanced-features',
    icon: <RocketOutlined />,
    label: (
      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
        <span>高级功能 </span>
        <span style={{ 
          fontSize: '10px', 
          color: '#00ff00', 
          marginLeft: '4px'
        }}>
           专家2.0
        </span>
      </div>
    ),
  },

];



const AdminSider: React.FC<AdminSiderProps> = ({ collapsed, onCollapse }) => {
  const router = useRouter();
  const pathname = usePathname();

  // 为菜单项添加点击事件
  const processMenuItems = (items: MenuItem[]): MenuProps['items'] => {
    return items.map(item => ({
      ...item,
      onClick: item.children ? undefined : () => router.push(item.key),
      children: item.children ? processMenuItems(item.children) : undefined
    }));
  };

  const mainMenuItems = processMenuItems(staticMenuItems || []);

  // 组合所有菜单项
  const allMenuItems: MenuProps['items'] = [
    ...(mainMenuItems || [])
  ];

  /**
   * 根据当前路径确定默认展开的菜单项
   */
  const getDefaultOpenKeys = (): string[] => {
    const openKeys: string[] = [];
    
    return openKeys;
  };

  return (
    <Sider
      width={280}
      collapsedWidth={60}
      collapsible
      collapsed={collapsed}
      onCollapse={onCollapse}
      trigger={null}
      breakpoint="lg"
      className={styles.adminSider}
    >
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={[pathname]}
        defaultOpenKeys={getDefaultOpenKeys()}
        items={allMenuItems}
        className={styles.siderMenu}
      />
      
      {/* 底部服务设置和版本号 */}
      <div className={styles.siderFooter}>
        <div className={styles.serviceSettings}>
          <Button
            type="text"
            icon={<DatabaseOutlined />}
            onClick={() => router.push('/admin/creation-records')}
            className={styles.serviceButton}
          >
            {!collapsed && '创作记录'}
          </Button>
          {/* <Button
            type="text"
            icon={<HistoryOutlined />}
            onClick={() => router.push('/admin/generation-records')}
            className={styles.serviceButton}
          >
            {!collapsed && '生成记录'}
          </Button> */}
          <Button
            type="text"
            icon={<SettingOutlined />}
            onClick={() => router.push('/sd-model')}
            className={styles.serviceButton}
          >
            {!collapsed && '服务设置'}
          </Button>
        </div>
        
        {/* 快速入门和API文档 */}
        <div className={styles.helpSection}>
          <Button
            type="text"
            icon={<BookOutlined />}
            onClick={() => window.open('/docs/quick-start', '_blank')}
            className={styles.helpButton}
          >
            {!collapsed && '快速入门'}
          </Button>
          <Button
            type="text"
            icon={<ApiOutlined />}
            onClick={() => window.open('/docs/api', '_blank')}
            className={styles.helpButton}
          >
            {!collapsed && 'API文档'}
          </Button>
        </div>
        
        <div className={styles.versionInfo}>
          {!collapsed && <span className={styles.versionText}>v{VERSION}</span>}
        </div>
        {/* 展开/收起按钮 - 通栏居中 */}
        <div className={styles.collapseButtonContainer}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => onCollapse(!collapsed)}
            className={styles.triggerButton}
          />
        </div>
      </div>
    </Sider>
  );
};

export default AdminSider;